<template>
  <h1>{{msg}}<br>

  <i class="el-icon-edit"></i>
  <i class="el-icon-phone-outline"></i>
  <i class="el-icon-picture-outline-round"></i>
  <el-button type="primary" icon="el-icon-search">搜索</el-button><br>
  <el-button type="danger">危险按钮</el-button><br>
  <!-- 布局效果 -->

  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content bg-purple">Hello</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple-light">Hello</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple">Hello</div></el-col>
  </el-row>
  <i class="el-icon-delete"></i><br>
   <el-button type="success">成功按钮</el-button><br>
   <el-button type="primary" round>主要按钮</el-button>
   <el-button type="success" icon="el-icon-edit">我的成功按钮?</el-button><br>
   <el-input v-model="msg" placeholder="请输入内容"></el-input>
  <el-input
    placeholder="请输入内容"
    v-model="msg"
    clearable>
  </el-input><br>
  <el-input placeholder="请输入密码" v-model="msg" show-password></el-input><br>
  <el-input
      placeholder="请选择日期"
      suffix-icon="el-icon-date"
      v-model="input1">
    </el-input>
    <el-table :data="arr" stripe>
      <el-table-column label="编号" prop="id" ></el-table-column>
      <el-table-column label="品牌" prop="brand"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
    </el-table>
    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
    <el-slider v-model="value2"></el-slider><br>
    <el-color-picker v-model="color1"></el-color-picker><br>
    <el-link href="https://www.baidu.com/" target="_blank" type="primary">标签</el-link><br>
    <!-- v-model是指双向绑定,将label的值交给radio保存 -->
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
    <el-radio v-model="radio" label="3">备选项</el-radio><br>
    <el-form ref="form" :model="form" label-width="80px">
      <!-- el-form-item表单项 -->
      <el-form-item label="标题">
        <!-- el-input输入框 placeholder 提示信息  v-model双向绑定-->
        <el-input placeholder="请输入标题" v-model="form.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="卖点">
        <el-input placeholder="输入卖点" v-model="form.sell" clearable></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input placeholder="价格" v-model="form.price" clearable></el-input>
      </el-form-item>
      <el-form-item label="详情">
        <el-input placeholder="详情" v-model="form.dit" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </el-form-item>
    </el-form>
  </h1>
</template>

<script>
  /*自定义组件*/
  /*支持导出的自定义组件*/
  export default {
    name: 'car',
    data () {
      return {
        msg: 'Welcome to Your New Car!',
        input1: '',
        arr:[{id:100,brand:"鸿星尔克",desc:"to be no.1"},
        {id:101,brand:"蜜雪冰城",desc:"你爱我我爱你蜜雪冰城甜蜜蜜"},
        {id:102,brand:"安踏",desc:"永不止步"},
        {id:103,brand:"李宁",desc:"一切皆有可能"}],
        num: 1,
        value2: 50,
        color1:null,
        radio:null,
        form:{
          title:'',
          sell:'',
          price:'',
          dit:''
        }
      }
    },
    methods:{
      handleChange(value){
        console.log(value);
      },
      onSubmit(){
        alert('submit!')
      }
    }
  }
</script>

<style>

  .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
